續上篇，修改樣式並先放到影片上方的位置 :

$('<div id="root"></div').prependTo( "#player-api");

逐步修改樣式如下 :

<template>
    <el-container>
        <el-main>
            <el-row v-show="!isPaused">
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <span>{{currentMessage}}</span>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <el-button type="primary" @click="play()">停止按鈕</el-button>
                        {{currentTime}} - 已儲存 {{items.length}} 筆訊息
                    </div>
                </el-col>
            </el-row>
            <el-row v-show="isPaused">
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="currentMessage">
                        </el-input>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <el-button type="success" @click="saveData()">儲存</el-button>
                        <el-button type="primary" @click="play()">播放按鈕</el-button>
                        {{currentTime}} - 已儲存 {{items.length}} 筆訊息
                    </div>
                </el-col>
            </el-row>
            <el-row v-show="isShowDetail">
                <el-col :span="16">
                    <ul v-for="item in items">
                        <li>{{item.time}} - {{item.message}}</li>
                    </ul>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>

取得當前影片是否撥放中 :

var video = document.getElementsByClassName('video-stream')[0];
this.isPaused = video.paused;

因為儲存多部影片的備註還有問題，所以先修改儲存到 key 為 tempData :

        loadData: function() {
            var vm = this;

            chrome.storage.sync.get("tempData", function(result) {
                vm.items = result.tempData;
                console.log(result);
                if (vm.items === undefined) {
                    vm.items = [];
                }
            });
        },

        saveData: function() {
            var vm = this;

            var filterByTime = vm.items.filter(function(item, index, array) {
                return item.time == vm.currentTime;
            });
            if (filterByTime.length > 0) {
                vm.items.forEach(function(item, index, array){
                    if(item.time == vm.currentTime)
                    {
                        item.message = vm.currentMessage;
                    }
                });
            } else {
                var item = {
                    time: vm.currentTime,
                    message: vm.currentMessage
                }
                vm.items.push(item);
            }
            chrome.storage.sync.set({ "tempData" : vm.items }, function() {});
        },

目前呈現結果如下 :

影片播放時會顯示訊息 :

影片暫停時允許輸入訊息 :

感謝收看 :)